<template>
	<div class="home">
		<van-button text="显示提示" @click="handleShowToast"/>
		<van-button text="显示加载" @click="handleShowLoading"/>
		<van-button text="显示成功" @click="handleShowSuccess"/>
		<van-button text="显示失败" @click="handleShowFail"/>
		<van-button text="跳转" @click="handleTo"/>
		<span class="cs">圣诞节安徽省大家</span>
	</div>
</template>

<script setup lang="ts">
import {onMounted} from "vue";
import {toast} from "@/utils/toast";
import {useRouter} from "vue-router"; // 改用 useRouter
const router = useRouter(); // 获取 router 实例
onMounted(() => {
	toast.show("页面加载完成");
});

const handleShowToast = () => {
	toast.show("这是一个普通提示", {
		icon: "like-o"
	});
};

const handleShowLoading = () => {
	toast.loading("加载中...");
	
	setTimeout(() => {
		toast.close();
		toast.success("加载完成");
	}, 3000);
};

const handleShowSuccess = () => {
	toast.success("操作成功");
};

const handleShowFail = () => {
	toast.fail("操作失败");
};
const handleTo = () => {
	router.push("/test");
};
</script>

<style lang="scss" scoped>
.home {
	padding: 20px;
	
	.van-button {
		margin: 10px;
	}
	
	.cs {
		display: block;
		margin-top: 20px;
		color: #007aff;
		font-size: 16px;
		font-weight: bold;
		
		// 使用 mixin
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
</style>
